<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .adver {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .adver-top {
            font-size: 14px;
            line-height: 30px;
        }

        .adver-top .adver-title {
            text-indent: 10px;
        }

        .adver-top .adver-close {
            padding: 0 5px;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="adver" v-if="isShow">
            <div class="adver-top">
                <div class="adver-title">距离广告关闭还有{{count}}秒</div>
                <div class="adver-close" @click="closeHandler">X</div>
            </div>
            <div class="adver-detail">
                <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
            </div>
        </div>
    </div>
</body>
<script>

      // 动态生成小广告(默认隐藏)

    // 1. 延迟5s生成小广告   => 渲染出来
    // 2. 倒计时10秒后关闭小广告
    // 3. 重复 1 - 2 两步
    // 4. 点击 x  关闭小广告
    // 5. 重复 1 - 2 两步
    var vm = new Vue({
        el:"#app",
        data:{
            isShow:false,
            count:10,
            delayTimer:null,
            intervalTimer:null,
            delay:5000,
        },
        methods:{
            showAdver(){
                this.delayTimer = setTimeout(()=>{
                    this.isShow = true;
                    this.intervalTimer = setInterval(()=>{
                        this.count--;
                        if(this.count <= 0){
                            clearInterval(this.intervalTimer);
                            this.count = 10;// 重置count
                            this.isShow = false;
                            this.showAdver();
                        }
                    },1000);
                },this.delay)
            },
            closeHandler(){
                clearInterval(this.intervalTimer);
                clearTimeout(this.delayTimer);
                this.isShow = false;
                this.count = 10;
                this.showAdver();
            }
        },
        mounted() {
            this.showAdver();
        },
    })



</script>
</html>